<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店展示</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.6/css/layui.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="js/axios.min.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
        body {
            background-color: #f7f9fc;
        }

        .user-info,
        .announcement-list {
            padding: 10px;
            background: white;
            margin: 10px;
            border-radius: 5px;
            border: 1px solid #dcdfe6;
        }

        .container {
            display: flex;
            justify-content: space-between;
        }

        .hotel-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            padding: 20px;
        }

        .hotel-card {
            border: 1px solid #dcdfe6;
            border-radius: 5px;
            padding: 20px;
            background-color: white;
            width: 300px;
            text-align: left; /* 左对齐 */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
        }

        .hotel-card:hover {
            transform: scale(1.05); /* 鼠标悬停时放大 */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* 增加阴影 */
        }

        .hotel-card img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
            cursor: pointer; /* 添加手形光标 */
        }

        .hotel-price {
            color: pink; /* 粉红色 */
            font-weight: bold; /* 加粗 */
        }

        /* 增加行间距 */
        p {
            margin-bottom: 15px; /* 增加段落间距 */
        }

        /* 滚动公告style START */
        .announcement-bar {
            overflow: hidden; /* 隐藏溢出内容 */
            background: #009688; /* 背景颜色 */
            color: white; /* 字体颜色 */
            padding: 21px 0; /* 上下内边距 */
            position: relative; /* 使子元素定位 */
            width: 100%; /* 宽度占满 */
            display: flex; /* 使用 Flexbox */
            align-items: center; /* 垂直居中 */
        }

        .announcement-content {
            white-space: nowrap; /* 防止文本换行 */
            animation: scroll 10s linear infinite; /* 动画效果 */
            position: absolute; /* 绝对定位 */
            right: 0; /* 从右侧开始 */
        }

        @keyframes scroll {
            0% {
                transform: translateX(100%); /* 从右侧开始 */
            }
            100% {
                transform: translateX(-100%); /* 向左侧移动 */
            }
        }

        /* 滚动公告style END */

        /* 骨架屏样式 */
        .skeleton {
            background-color: #e0e0e0;
            border-radius: 4px;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% {
                opacity: 0.5;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0.5;
            }
        }
    </style>
</head>
<body>

<div id="app" v-cloak>


    <el-skeleton :loading="loading" :rows="15" animated/>

    <div class="announcement-bar" v-if="!loading">
        <div class="announcement-content">
            <h4 style="font-size: 16px;">欢迎访问我们的酒店展示网站！所有酒店均可在线预约。</h4>
        </div>
    </div>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand"  href="index.html">酒店展示</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">首页 <span class="sr-only">(当前页)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">酒店收藏</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">我的订单</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="zhuye.html">个人中心</a>
                </li>
            </ul>
        </div>
    </nav>

  <!--  /*    "id": 1,
    "name": "上海外滩万达瑞华酒店",
    "address": "上海市重庆县清城段街V座 293037",
    "img": "https://dimg04.c-ctrip.com/images/200u0k000000c9j37749C_R_300_225_R5_Q70_D.jpg",
    "iswifi": 0,
    "jianjie": "翡翠大酒店是一家位于市中心的奢华酒店，拥有豪华客房和套房，提供顶级设施和服务。酒店内设有多个餐厅、健身中心、室内游泳池和水疗中心，为您的住宿体验增添了舒适和便利。",
    "isbreakfirst": 0,
    "ishotwater": 1,
    "starnum": "5星"*/-->

    <div class="hotel-list" v-if="!loading">
        <div class="hotel-card" v-for="(hotel,index) in hotels" :key="index">
            <img :src="hotel.img" :alt="hotel.name">
            <h4 style="  padding: 10px; font-weight: bold;">{{ hotel.name }} <i class="bi bi-house-fill"></i></h4>
            <p><i class="bi bi-geo-alt-fill"></i> 地址: {{ hotel.address }}</p>
            <p class="hotel-price">最低价格: ¥正在开发</p>
            <p>{{ hotel.jianjie }}</p>
            <span class="badge badge-success" v-if="hotel.iswifi">有WiFi</span>
            <span class="badge badge-warning" v-if="hotel.ishotwater">24供热水</span>
            <span class="badge badge-info" v-if="hotel.isbreakfirst">有早餐</span>
            <button class="layui-btn" @click="viewDetails(hotel.id)">查看详情</button>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="js/data.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: true,
                hotels: [],
            /*    "id": 1,
                "name": "上海外滩万达瑞华酒店",
                "address": "上海市重庆县清城段街V座 293037",
                "img": "https://dimg04.c-ctrip.com/images/200u0k000000c9j37749C_R_300_225_R5_Q70_D.jpg",
                "iswifi": 0,
                "jianjie": "翡翠大酒店是一家位于市中心的奢华酒店，拥有豪华客房和套房，提供顶级设施和服务。酒店内设有多个餐厅、健身中心、室内游泳池和水疗中心，为您的住宿体验增添了舒适和便利。",
                "isbreakfirst": 0,
                "ishotwater": 1,
                "starnum": "5星"*/
            };
        },
        created() {
         /*   setTimeout(() => {

                this.hotels = [];
            }, 1500); // 模拟加载延迟*/

            axios.get(`${urlluodeng}/hotel/getallhotels`)
                .then(response => {
                    this.hotels = response.data.data;
                    setTimeout(() => {
                        this.loading = false;
                    }, 900)

                })
                .catch(error => {
                    console.log(error);
                    this.$message.error('加载失败，请稍后再试');
                });

        },
        methods: {
            viewDetails(hotelId) {
                window.location.href = `detail2.html?id=${hotelId}`;
            },
        },
    });
</script>

</body>
</html>
